<template>
  <view>
    <scroll-view class="product-list" scroll-y v-if="cartList.length > 0">
      <view
        class="shop-cart"
        v-for="(item, index) in cartList"
        :key="item[selectKey]"
      >
        <uni-icons
          class="delete-icon"
          @click="handleCartDelete(index)"
          type="clear"
          size="48rpx"
        ></uni-icons>
        <view class="shop-info">
          <view
            @click="handleTriggerSelect(item)"
            :class="selectCartList.includes(item[selectKey]) ? 'selected' : ''"
          >
            <uni-icons
              class="selected-icon"
              v-if="selectCartList.includes(item[selectKey])"
              type="checkbox-filled"
              color="#0b3f35"
              size="28"
            ></uni-icons>
            <uni-icons
              v-else
              type="circle"
              color="#0b3f35"
              size="28"
            ></uni-icons>
          </view>
          <image
            mode="aspectFill"
            class="shop-image"
            :src="baseUrl + item.goodImg"
            @click="handleToDetail(item)"
          >
          </image>
        </view>
        <view class="basic">
          <view class="shop-name" @click="handleToDetail(item)">{{
            item.goodName
          }}</view>
          <view class="tag-list">
            <tag-list type="small" :tagList="item.shopTagList"></tag-list>
          </view>
          <view class="basic-footer">
            <view class="price-content">
              <view class="unit">￥</view>
              <view class="price">{{ item.retailPrice }}</view>
            </view>
            <view class="cart-num">
              <view
                class="symbol"
                @click="
                  handleOperateCount({
                    type: 'del',
                    item,
                    index,
                  })
                "
                >-</view
              >
              <view class="count">
                {{ item.count }}
              </view>
              <view
                class="add"
                @click="
                  handleOperateCount({
                    type: 'add',
                    item,
                    index,
                  })
                "
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="last-child"></view>
    </scroll-view>
    <Empty v-else />
    <view class="cart-footer">
      <view class="cart-select" @click="handleTrigerSelectAll">
        <template v-if="cartList.length">
          <view :class="selectedAll ? 'selected' : ''">
            <uni-icons
              v-if="selectedAll"
              class="selected-icon"
              type="checkbox-filled"
              color="#0b3f35"
              size="28"
            ></uni-icons>
            <uni-icons
              v-else
              type="circle"
              color="#0b3f35"
              size="28"
            ></uni-icons>
          </view>
          全选
        </template>
      </view>
      <view class="cart-button">
        总共:
        <view class="price-content">
          <view class="price">{{ amount }}</view>
          <view class="unit">件</view>
        </view>
        合计:
        <view class="price-content">
          <view class="unit">￥</view>
          <view class="price">{{ selectedPrice.toFixed(2) }}</view>
        </view>
        <view class="cart-submit" @click="handleSubmit">去结算</view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseUrl } from "@/config";
export default {
  props: {
    cartList: {
      type: Array,
      default: () => [],
    },
    selectCartList: {
      type: Array,
      default: () => [],
    },
    selectKey: {
      type: String,
      default: "_id",
    },
  },
  watch: {
    selectCartList: {
      handler() {
        this.calculatePrice();
      },
      deep: true,
    },
  },
  data() {
    return {
      baseUrl,
      selectedAll: true,
      selectedPrice: 0,
      amount: 0,
    };
  },
  methods: {
    handleOperateCount(params) {
      this.$emit("operateCount", params);
    },
    handleTriggerSelect(item) {
      this.$emit("triggerSelect", item);
    },
    handleTrigerSelectAll(item) {
      console.log("aa");
      this.$emit("triggerSelectAll", this.selectedAll);
    },
    handleToDetail(item) {
      this.$emit("toDetail", item);
    },
    handleCartDelete(index) {
      this.$emit("cartDelete", index);
    },
    handleSubmit() {
      this.$emit("submit");
    },
    calculatePrice() {
      let price = 0;
      const len = this.cartList.length;
      const selectedList = this.cartList.filter((item) =>
        this.selectCartList.includes(item[this.selectKey])
      );
      this.selectedPrice = selectedList.reduce((retailPrice, item) => {
        return retailPrice + item.count * item.retailPrice;
      }, 0);
      this.amount = selectedList.reduce((retailPrice, item) => {
        return retailPrice + item.count;
      }, 0);
      const newList = {
        cartList: this.cartList,
        selectCartList: this.selectCartList,
      };
      this.$store.commit("SET_SHOP_CAR", newList);
      this.selectedAll =
        len &&
        len === this.selectCartList.length &&
        this.selectCartList.length > 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-list {
  height: 100vh;
}

page {
  background: rgb(246, 246, 246);
  padding-bottom: 150rpx;
}

.last-child {
  height: 280upx;
}

.checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border: 2rpx solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    // padding: 2rpx;
    border: none;
    // background: linear-gradient(to right, #FEEF3C, #F3CD34);

    .selected-icon {
      margin: 2rpx;
      color: #fff !important;
    }
  }
}

.price-content {
  display: flex;
  align-items: flex-end;
  color: rgb(225, 76, 68);
  font-weight: 600;

  .unit {
    font-size: 24rpx;
  }

  .price {
    font-size: 28rpx;
  }
}

.shop-cart {
  width: 718rpx;
  background: #fff;
  margin: 16rpx;
  padding: 16rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  display: flex;
  position: relative;

  .delete-icon {
    position: absolute;
    top: -12rpx;
    right: -12rpx;
    color: #df3e36 !important;
  }

  .shop-info {
    display: flex;
    align-items: center;

    .shop-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
    }
  }

  .basic {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 16rpx;

    .shop-name {
      font-size: 26rpx;
    }

    .tag-list {
      flex: 1;
      margin-top: 8rpx;
    }

    .basic-footer {
      display: flex;
      justify-content: space-between;

      .cart-num {
        display: flex;

        .count {
          width: 80rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
        }

        .symbol {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          border: 1rpx solid #0b3f35;
          color: #0b3f35;
          border-radius: 50%;
        }

        .add {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          border: 1rpx solid #0b3f35;
          color: #fff;
          background-color: #0b3f35;
          border-radius: 50%;
        }
      }
    }
  }
}

.cart-footer {
  position: fixed;
  bottom: 24rpx;
  background: #fff;
  width: 702rpx;
  padding: 24rpx;
  box-sizing: border-box;
  left: 24rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;

  .cart-select {
    display: flex;
    align-items: center;
  }

  .cart-button {
    display: flex;
    align-items: center;

    .cart-submit {
      margin-left: 24rpx;
      background: #0b3f35;
      border-radius: 60rpx;
      height: 60rpx;
      width: 150rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
    }
  }
}
</style>
